import { 
  AmbientLight,
  BoxBufferGeometry,
  BoxGeometry,
  Mesh,
  MeshStandardMaterial,
  PerspectiveCamera,
  Scene, 
  TextureLoader, 
  WebGLRenderer
} from "three";
import stats from '../../utils/stats';
// 调用
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GUI } from 'dat.gui';

let scene = new Scene();
let renderer = setRenderer();
let camera = setCamera();

const controls = {
  normalScaleX: 1,
  normalScaleY: 1,
  rotationSpeed: 0.01
}

setLight();
init();

const trackballControls = new OrbitControls(camera, renderer.domElement);
// 调整场景位置
trackballControls.target.set(0, 3, 0);

function render() {
  stats.update();
  trackballControls.update();

  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

function setRenderer() {
  const renderer = new WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 支持阴影生成 
  renderer.shadowMap.enabled = true;
  document.body.appendChild(renderer.domElement);

  return renderer
}

function setCamera(): PerspectiveCamera {
  let camera = new PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
  camera.position.set(0, 20, 40);
  scene.add( camera );

  return camera;
}

// 灯光设置
function setLight() {
  scene.add(new AmbientLight(0xeeeeee));
}

/** 功能区 */
function init() {
  let textureLoader = new TextureLoader();
  let material = new MeshStandardMaterial({
    map: textureLoader.load('/textures/uv/ash_uvgrid01.jpg'),
    metalness: 0.02,
    roughness: 0.07,
    color: 0xffffff,
  });

  let cubeGeom = new BoxGeometry(8, 8, 8);
  // 定制第一面的uv属性
  // https://threejs.org/docs/#api/zh/core/Geometry.faceVertexUvs
  cubeGeom.faceVertexUvs[0][0][0].x = 0.5;
  cubeGeom.faceVertexUvs[0][0][0].y = 0.7;
  cubeGeom.faceVertexUvs[0][0][1].x = 0.4;
  cubeGeom.faceVertexUvs[0][0][1].y = 0.1;
  cubeGeom.faceVertexUvs[0][0][2].x = 0.4;
  cubeGeom.faceVertexUvs[0][0][2].y = 0.5;
  let cube = new Mesh(cubeGeom, material);
  cube.rotation.y = 1.7 * Math.PI;
  scene.add(cube);
  
  addGUI(cubeGeom)
}


function addGUI(geom: BoxGeometry): void {
  let controls = {
    uv1: geom.faceVertexUvs[0][0][0].x,
    uv2: geom.faceVertexUvs[0][0][0].y,
    uv3: geom.faceVertexUvs[0][0][1].x,
    uv4: geom.faceVertexUvs[0][0][1].y,
    uv5: geom.faceVertexUvs[0][0][2].x,
    uv6: geom.faceVertexUvs[0][0][2].y,
  }
  const gui = new GUI();
  
  gui.add(controls, 'uv1', 0, 1).onChange(val => {
    geom.faceVertexUvs[0][0][0].x = val;
    geom.uvsNeedUpdate = true;
  });
  gui.add(controls, 'uv2', 0, 1).onChange(val => {
    geom.faceVertexUvs[0][0][0].y = val;
    geom.uvsNeedUpdate = true;
  });
  gui.add(controls, 'uv3', 0, 1).onChange(val => {
    geom.faceVertexUvs[0][0][1].x = val;
    geom.uvsNeedUpdate = true;
  });
  gui.add(controls, 'uv4', 0, 1).onChange(val => {
    geom.faceVertexUvs[0][0][1].y = val;
    geom.uvsNeedUpdate = true;
  });
  gui.add(controls, 'uv5', 0, 1).onChange(val => {
    geom.faceVertexUvs[0][0][2].x = val;
    geom.uvsNeedUpdate = true;
  });
  gui.add(controls, 'uv6', 0, 1).onChange(val => {
    geom.faceVertexUvs[0][0][2].y = val;
    geom.uvsNeedUpdate = true;
  });
}